(function(){
	var api = 'http://h6.duchengjiu.top/shop/';
	var oShopping = document.getElementById('shopping');
	var oBody = document.getElementsByTagName('body')[0];
	var oTable = document.getElementById('table');
	$.get(api + 'api_cart.php',{'token':localStorage.getItem('token')}, function(result){
		var obj=result.data;
		//console.log(obj);
		var th =`
			<tr>
				<th width="100"><input type="checkbox" class="allBtn"/>全选</th>
				<th width="300">良品</th>
				<th width="300">数量</th>
				<th width="100">单价</th>
				<th width="100">小计</th>
				<th width="100">操作</th>
			</tr>
		`;
		var trStr='';
		for(var i = 0;i < obj.length; i++){
			var xiaoji = obj[i].goods_number * obj[i].goods_price + '.00';
			trStr += `
				<tr>
					<td>
						<input type="checkbox" class="check" />
						<img src="${obj[i].goods_thumb}"/>
					</td>
					<td>${obj[i].goods_name}</td>
					<td>
						<span id="minus" data-id="${obj[i].goods_id}">-</span>
						<input type="text" id="number" value="${obj[i].goods_number}" />
						<span id="add" data-id="${obj[i].goods_id}">+</span>
					</td>
					<td>${obj[i].goods_price}</td>
					<td>${xiaoji}</td>
					<td><a href="javascript:;" class="delete"  data-id="${obj[i].goods_id}">删除</a></td>
				</tr>
			`;
			};
		oTable.innerHTML = th + trStr;
		var Del = document.getElementsByClassName('delete');
		oBody.onmouseover = function(){
			if(Del.length==0){
				oShopping.style.display='block';
			}
		};
		
	});
	//用事件对象去做交互
	(function(){
		//定义全局变量
		var lock = false;//定义一个锁
		oTable.onclick = function(event){
			var event = event || window.event;
			//console.log(event);
			//每次点击整个表格，然后去判断它的target目标对象，然后根据点击的不同对象 去做不同的事情
			
			//点击减号
			if(event.target.innerText == '-'){
				//当前点击的哪一个，然后去改它后面一个input里面的值
				var oInput = event.target.nextElementSibling;
				var oInputV = parseInt(oInput.value);
				oInputV--;
				oInputV = oInputV <= 1 ? 1 : oInputV;
				oInput.value = oInputV;
				//封装方法
				updaCart();
			}
			function updateCart(){
				//获取绑定的属性data-id的值
				var goodsId = event.target.dataset.id;
				$.post(api + 'api_cart.php?token=' + localStorage.getItem('token'),{'goods_id':goodsId, 'number':oInputV}, function(result){
					//console.log(result);
					if(result.code == 0){
						//找到单价和小计元素
						var unitPrice = parseInt(event.target.parentNode.nextElementSibling.innerHTML);
						//console.log(unitPrice)
						var xiaoji = event.target.parentNode.nextElementSibling.nextElementSibling;
						xiaoji.innerHTML = unitPrice * oInputV + '.00';
						//总价改变
						getAllPrice();			
					}
				})
			};
			//点击加号
			if(event.target.innerText == '+'){
				//当前点击的哪一个，然后去改它后面一个input里面的值
				var oInput = event.target.previousElementSibling;
				var oInputV = parseInt(oInput.value);
				oInputV++;
				oInputV = oInputV >= 20 ? 20 : oInputV;
				oInput.value = oInputV;
				//封装一个方法
				updateCart();
				
			};
			
			//点击全选
			if(event.target.className == 'allBtn'){
				lock = lock ? false : true;//交替行为
				var strChecked = lock ? 'checked' : ''; //设置选中
				//获取所有的复选框
				var oCheckbox = document.querySelectorAll('.check');
				//遍历
				for(var i = 0; i < oCheckbox.length; i++){
					//设置所有的为选中
					oCheckbox[i].checked = strChecked;
					//给所有选中的加一个标记  属性
					if(strChecked == 'checked'){
						oCheckbox[i].setAttribute('name', 'haha');
					}else{
						oCheckbox[i].setAttribute('name', '');
					};
				};
				getAllPrice();
			};
			
			//单选中
			if(event.target.className == 'check'){
				//判断这个选没选中的值
				if(event.target.checked){
					event.target.setAttribute('name', 'haha');
				}else{
					event.target.setAttribute('name', '');
				};
				getAllPrice();
			};
			
			//删除
			if(event.target.className == 'delete'){
				//获取当前点元素的ID
				var goodsId = event.target.dataset.id;
				//先更新后台数据 ，成功了之后再去删除前台元素
				$.post(api + 'api_cart.php?token=' + localStorage.getItem('token'), {'goods_id':goodsId, 'number':0}, function(result){
					//console.log(result);
					if(result.code == 0){
						//操作DOM元素移除整 行的tr
						var oTr = event.target.parentNode.parentNode;
						var oTable = event.target.parentNode.parentNode.parentNode;
						//移除
						oTable.removeChild(oTr);
						//重新算一下总价
						getAllPrice();
						
					}
				})
			};
			
		};
	})();
})();

function getAllPrice(){
	//先得到所有的有标记元素
	var oAll = document.querySelectorAll('[name="haha"]');
	var oAllP = document.getElementById('allPrice');
	//console.log(oAll)
	//遍历
	var allPirce = 0;
	for(x = 0; x < oAll.length; x++){
		var oXiaojiPrice = oAll[x].parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML;
		allPirce += parseInt(oXiaojiPrice);
	};
	oAllP.innerHTML = '￥' + allPirce + '.00';
}


